<template>
  <div class="my-order" ref="container">
    <div class="header bg-color-red">
      <div class="picTxt acea-row row-between-wrapper">
        <div class="text">
          <div class="name">订单信息</div>
          <div>
            累计订单：{{ orderData.statusAll || 0 }} 总消费：￥{{
              orderData.payAmount || 0
            }}
          </div>
        </div>
        <div class="pictrue"><img src="@assets/images/orderTime.png" /></div>
      </div>
    </div>
    <div class="nav acea-row row-around">
      <div
        class="item"
        :class="{ on: status === 12 }"
        @click="$router.replace({ path: '/order/list/12' })"
      >
        <div>待付款</div>
        <div class="num">{{ orderData.status0 || 0 }}</div>
      </div>
      <div
        class="item"
        :class="{ on: status === 2 }"
        @click="$router.replace({ path: '/order/list/2' })"
      >
        <div>待发货</div>
        <div class="num">{{ orderData.status1 || 0 }}</div>
      </div>
      <div
        class="item"
        :class="{ on: status === 3 }"
        @click="$router.replace({ path: '/order/list/3' })"
      >
        <div>待收货</div>
        <div class="num">{{ orderData.status2 || 0 }}</div>
      </div>
      <div
        class="item"
        :class="{ on: status === 4 }"
        @click="$router.replace({ path: '/order/list/4' })"
      >
        <div>待评价</div>
        <div class="num">{{ orderData.status3 || 0 }}</div>
      </div>
      <div
        class="item"
        :class="{ on: status === 5 }"
        @click="$router.replace({ path: '/order/list/5' })"
      >
        <div>已完成</div>
        <div class="num">{{ orderData.status4 || 0 }}</div>
      </div>
    </div>
    <div class="list">
      <div class="item" v-for="order in orderList" :key="order.id">
        <div class="title acea-row row-between-wrapper">
          <div class="acea-row row-middle">
            <span
              class="sign cart-color acea-row row-center-wrapper"
              v-if="order.orderType === 2"
              >拼团</span
            ><span
              class="sign cart-color acea-row row-center-wrapper"
              v-if="order.orderType ===6"
              >秒杀</span
            ><span
                           class="sign cart-color acea-row row-center-wrapper"
                           v-if="order.orderType ===3"
                           >团购</span
                         ><span
                                        class="sign cart-color acea-row row-center-wrapper"
                                        v-if="order.orderType ===5"
                                        >积分</span
                                      ><span
              class="sign cart-color acea-row row-center-wrapper"
              v-if="order.orderType ===4"
              >砍价</span
            >
            {{ order.createTime | formatDate }}
          </div>
          <div class="font-color-red">{{ getStatus(order) }}</div>
        </div>
        <div @click="$router.push({ path: '/order/detail/' + order.id })">
          <div
            class="item-info acea-row row-between row-top"
            v-for="cart in order.orderItemList"
            :key="cart.id"
          >
            <div class="pictrue">
              <img
                :src="cart.productPic"
                @click.stop="
                  $router.push({ path: '/detail/' + cart.productId })
                "

              />

            </div>
            <div class="text acea-row row-between">
              <div class="name line2">
                {{ cart.productName }}
              </div>
              <div class="money">
                <div>
                  ￥{{
                    cart.productPrice ? cart.productPrice : cart.productPrice
                  }}
                </div>
                <div>x{{ cart.productQuantity }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="totalPrice">
          共{{ order.orderItemList.length || 0 }}件商品，总金额
          <span class="money font-color-red">￥{{ order.payAmount }}</span>
        </div>
        <div class="bottom acea-row row-right row-middle">
          <template v-if="order.status >8">
            <div class="bnt cancelBnt" @click="cancelOrder(order)">
              取消订单
            </div>
            <div class="bnt bg-color-red" @click="paymentTap(order)">
              立即付款
            </div>
          </template>
          <template >
            <div
              class="bnt bg-color-red"
              @click="$router.push({ path: '/order/detail/' + order.id })"
            >
              查看详情
            </div>
          </template>
          <template v-if="order.status < 0">
            <div
              class="bnt default"
              @click="
                $router.push({ path: '/order/logistics/' + order.id })
              "
            >
              查看物流
            </div>
            <div  v-if="order.status == 3" class="bnt bg-color-red" @click="takeOrder(order)">
              确认收货
            </div>
          </template>
          <template v-if="order.status === 3">

            <div v-if="order.status === 3"
              class="bnt bg-color-red"
              @click="$router.push({ path: '/order/detail/' + order.id })"
            >
              去评价
            </div>
          </template>

        </div>
      </div>
    </div>
    <div class="noCart" v-if="orderList.length === 0 && pageNum > 1">
      <div class="pictrue"><img src="@assets/images/noOrder.png" /></div>
    </div>
    <Loading :loaded="loaded" :loading="loading"></Loading>
    <Payment
      v-model="pay"
      :types="payType"
      @checked="toPay"
      :balance="userInfo.blance"
    ></Payment>
  </div>
</template>
<script>
import { getOrderData, getOrderList } from "@api/order";
import {
  cancelOrderHandle,
  payOrderHandle,
  takeOrderHandle
} from "@libs/order";
import Loading from "@components/Loading";
import Payment from "@components/Payment";
import { mapGetters } from "vuex";
import moment from "moment";
import { isWeixin } from "@utils";

const STATUS = [
  "待付款",
  "待发货",
  "待收货",
  "待评价",
  "已完成",
  "",
  "",
  "",
  "",
  "待付款"
];

const NAME = "MyOrder";

export default {
  name: NAME,
  data() {
    return {
      offlinePayStatus: 2,
      orderData: {},
      status: 12,
      type: parseInt(this.$route.params.type) || 12,
      pageNum: 1,
      pageSize: 20,
      loaded: false,
      loading: false,
      orderList: [],
      pay: false,
      payType: ["yue", "weixin"],
      from: isWeixin() ? "weixin" : "weixinh5"
    };
  },
  components: {
    Loading,
    Payment
  },
  computed: mapGetters(["userInfo"]),
  watch: {
    $route(n) {
      if (n.name === NAME) {
        const type = parseInt(this.$route.params.type) || 12;
        if (this.status !== type) {
          this.changeType(type);
        }
        this.getOrderData();
      }
    }
  },
  methods: {
    setOfflinePayStatus: function(status) {
      var that = this;
      that.offlinePayStatus = status;
      if (status === 12) {
        if (that.payType.indexOf("offline") < 0) {
          that.payType.push("offline");
        }
      }
    },
    getOrderData() {
      getOrderData().then(res => {
        this.orderData = res.data.count;
      });
    },
    takeOrder(order) {
      takeOrderHandle(order.id).finally(() => {
        this.reload();
        this.getOrderData();
      });
    },
    reload() {
      this.changeType(this.type);
    },
    changeType(type) {
      this.status = type;
      this.type = type;
      this.orderList = [];
      this.pageNum = 1;
      this.loaded = false;
      this.loading = false;
      this.getOrderList();
    },
    getOrderList() {
      if (this.loading || this.loaded) return;
      this.loading = true;


      getOrderList({
        pageNum:this.pageNum,

        status:this.type
      }).then(res => {
        this.orderList = this.orderList.concat(res.data.records);
        this.pageNum++;
        this.loaded = res.data.records.length < this.pageSize;
        this.loading = false;
      });
    },
    getStatus(item) {
      if (item.status === 12) {
        return "待付款";
      }
      if (item.status === 2) {
        return "待发货";
      }
      if (item.status === 3) {
        return "待收货";
      }
      if (item.status === 4 ) {
        return "待评价";
      }
      if (item.status === 4 && item.is_comment === 2) {
        return "已评价";
      }
      if (item.status === 5) {
        return "已完成";
      }
      if (item.status === 6) {
        return "售后单";
      }
    },
    cancelOrder(order) {
      cancelOrderHandle(order.id)
        .then(() => {
          this.orderList.splice(this.orderList.indexOf(order), 1);
        })
        .catch(() => {
          this.reload();
        });
    },
    paymentTap: function(order) {
      var that = this;
      if (
        !(
          order.combination_id > 0 ||
          order.bargain_id > 0 ||
          order.seckill_id > 0
        )
      ) {
        that.setOfflinePayStatus(order.offlinePayStatus);
      }
      this.pay = true;

    },
    toPay() {}
  },
  mounted() {
    this.getOrderData();
    this.getOrderList();
    this.$scroll(this.$refs.container, () => {
      !this.loading && this.getOrderList();
    });
  },

    filters: {
          formatNull(value) {
            if(value===undefined||value===null||value===''){
              return '暂无';
            }else{
              return value;
            }
          },
          formatLongText(value) {
            if(value===undefined||value===null||value===''){
              return '暂无';
            }else if(value.length>8){
              return value.substr(0, 8) + '...';
            }else{
              return value;
            }
          },
          formatPayType(value) {
            if (value === 2) {
              return '支付宝';
            } else if (value === 1) {
              return '微信小程序';
            } else  if (value === 3){
              return '余额支付';
            } else  if (value === 5){
                       return '积分兑换';
                     }
          },
           formatDate: function(value) {
                return moment(value).format("YYYY-MM-DD");
              },
          formatSourceType(value) {
            if (value === 1) {
              return '小程序';
            } else if (value === 2){
              return 'h5订单';
            }else if (value === 3){
              return 'PC订单';
            }else if (value === 4){
              return 'android订单';
            }else if (value === 5){
              return 'ios订单';
            }
          },
          formatOrderType(value) {
            if (value === 2) {
              return '拼团订单';
            } else if (value === 3) {
              return '团购订单';
            } else  if (value === 6){
              return '秒杀订单';
            }else if (value === 1) {
              return '普通订单';
            }else if (value === 4) {
                       return '砍价订单';
                     } else if (value === 4) {
                            return '积分订单';
                        }
          },
          formatAddress(order) {
            let str = order.receiverProvince;
            if (order.receiverCity != null) {
              str += "  " + order.receiverCity;
            }
            str += "  " + order.receiverRegion;
            str += "  " + order.receiverDetailAddress;
            return str;
          },
          formatStatus(value) {
            if (value === 2) {
              return '待发货';
            } else if (value === 3) {
              return '待收货';
            } else if (value === 4) {
              return '待评价';
            } else if (value === 5) {
              return '已完成';
            } else if (value === 6) {
              return '维权中';
            } else if (value === 7) {
              return ' 维权已完成';
            } else if (value === 8) {
              return '待分享';
            } else if (value === 13) {
              return '申请退款';
            } else if (value === 14) {
              return '已退款';
            }  else if (value === 15) {
              return '已关闭';
            } else if (value === 16) {
              return '无效订单';
            } else {
              return '待付款';
            }
          },
          formatPayStatus(value) {
            if (value === 0) {
              return '未支付';
            } else if(value===4){
              return '已退款';
            }else{
              return '已支付';
            }
          },
          formatDeliverStatus(value) {
            if (value === 0||value === 1) {
              return '未发货';
            } else {
              return '已发货';
            }
          },
           formatType(value) {
                  if (value === 1) {
                    return '商品';
                  } else {
                    return '赠品';
                  }
                },
          formatProductAttr(value){
            if(value==null){
              return '';
            }else{
              let attr = JSON.parse(value);
              let result='';
              for(let i=0;i<attr.length;i++){
                result+=attr[i].key;
                result+=":";
                result+=attr[i].value;
                result+=";";
              }
              return result;
            }
          }
        }
};
</script>

<style scoped>
.noCart {
  margin-top: 0.17rem;
  padding-top: 0.1rem;
}

.noCart .pictrue {
  width: 4rem;
  height: 3rem;
  margin: 0.7rem auto 0.5rem auto;
}

.noCart .pictrue img {
  width: 100%;
  height: 100%;
}
</style>
